<!--
 * @Description  : 
 * @Author       : jiangxiaoying
 * @Date         : 2021-02-01 10:32:47
 * @LastEditTime : 2021-04-02 18:05:22
 * @LastEditors  : jiangxiaoying
 * @FilePath     : \cloud-components\docs\pages\components\cloud-select\example4.vue
-->
<template>
  <div>
    设置defaultAllCheck=true，默认全选；使用maxTagCount最多显示多少个
    tag；使用textKey和valueKey设置下拉数据字段取值
    <div style="margin-top: 16px">
      <CloudSelect
        :options="options"
        v-model="value"
        mode="multiple"
        :defaultAllCheck="true"
        :maxTagCount="3"
        :allowClear="true"
      ></CloudSelect>
    </div>
    <div style="margin-top: 16px">
      <CloudSelect
        :options="options"
        v-model="value1"
        mode="multiple"
        textKey="name"
        valueKey="id"
        :maxTagCount="3"
        :allowClear="true"
      ></CloudSelect>
    </div>
    <div style="margin-top: 16px; display: flex">
      <CloudSelect
        :options="options2"
        v-model="value2"
        mode="multiple"
        :maxTagCount="3"
        :allowClear="true"
      ></CloudSelect>
      <CloudButton
        type="primary"
        @click="btnClick"
        style="margin-left: 20px"
        :loading="btnLoading"
        >异步查询</CloudButton
      >
    </div>
  </div>
</template>

<script>
import reqwest from 'reqwest';
export default {
  title: '4.多选(mode="multiple")',
  data() {
    return {
      options: [{
        title: '123123123123',
        text: '123123123123',
        value: '1',
        name: '123123123123',
        id: '1',
        disabled: true
      }, {
        title: 456,
        text: 456,
        value: '2',
        name: '456',
        id: '2'
      }, {
        title: 789,
        text: 789,
        value: '3',
        name: '789',
        id: '3'
      }, {
        title: 111,
        text: 111,
        value: '4',
        name: '111',
        id: '4'
      }, {
        title: 222,
        text: 222,
        value: '5',
        name: '123123123123',
        id: '5'
      }, {
        title: 333,
        text: 333,
        value: '6',
        name: '333',
        id: '6'
      }, {
        title: 666,
        text: 666,
        value: '7',
        name: '666',
        id: '7'
      }, {
        title: 999,
        text: 999,
        value: '8',
        name: '999',
        id: '8'
      }],
      value1: [
        {
          label: '123123123123',
          key: '1'
        }, {
          label: 456,
          key: '2'
        }, {
          label: 789,
          key: '3'
        }, {
          label: 111,
          key: '4'
        },
      ],
      value: undefined,
      value2: [],
      options2: [],
      btnLoading: false
    }
  },
  methods: {
    btnClick() {
      this.getList()
    },

    getList() {
      this.btnLoading = true
      reqwest({
        url: 'http://172.31.15.10:53000/mock/95/cloud-components/cloud-select',
        method: 'get',
        processData: false,
        success: (res) => {
           this.btnLoading = false
          this.options2 = res.data
          console.log(' this.options2', this.options2)
        },
      });
    }
  }
}
</script>

<style lang="scss">
</style>